<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

<script type="text/javascript">

	$(function(){
		$('.mydate').datetimepicker({
			language:'zh-CN',
			format:'yyyy-mm-dd',
			minView:'month',
			initialDate:new Date(),
			autoclose:true,
			todayBtn:true,
			clearBtn:true
		});

		$('#showSaveCreateClueModalBtn').click(function(){
			$('#saveCreateClueForm').get(0).reset();
			$('#createClueModal').modal('show');
		});

		$('#saveCreateClueBtn').click(function(){
			var owner = $('#create-clueOwner').val();
			var company = $.trim($('#create-company').val());
			var appellation = $('#create-call').val();
			var fullname = $.trim($('#create-surname').val());
			var job = $.trim($('#create-job').val());
			var email = $.trim($('#create-email').val());
			var phone = $.trim($('#create-phone').val());
			var website = $.trim($('#create-website').val());
			var mphone = $.trim($('#create-mphone').val());
			var state = $('#create-status').val();
			var source = $('#create-source').val();
			var description = $('#create-describe').val();
			var contactSummary = $('#create-contactSummary').val();
			var nextContactTime = $('#create-nextContactTime').val();
			var address = $('#create-address').val();

			if(owner==null||owner==''){
				alert('所有者不能为空');
				return;
			}

			if(company==null||company==''){
				alert('公司不能为空');
				return;
			}

			if(fullname==null||fullname==''){
				alert('姓名不能为空');
				return;
			}

			var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if(email!=null&&email!=''&&!regExp.test(email)){
				alert('邮箱不合法');
				return;
			}

			regExp = /^(0\d{2,3})-?(\d{7,8})$/;
			if(phone!=null&&phone!=''&&!regExp.test(phone)){
				alert('公司座机不合法');
				return;
			}

			regExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if(mphone!=null&&mphone!=''&&!regExp.test(mphone)){
				alert('手机号不合法');
				return;
			}

			regExp = /^((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?)$/;
			if(website!=null&&website!=''&&!regExp.test(website)){
				alert('公司网站不合法');
				return;
			}

			$.ajax({
				url:'workbench/clue/saveCreateClue.do',
				data:{
					owner:owner,
					company:company,
					appellation:appellation,
					fullname:fullname,
					job:job,
					email:email,
					phone:phone,
					website:website,
					mphone:mphone,
					state:state,
					source:source,
					description:description,
					contactSummary:contactSummary,
					nextContactTime:nextContactTime,
					address:address
				},
				dataType:'json',
				type:'post',
				success:function(res){
					if(res.code=='0'){
						alert(res.message);
						$('#createClueModal').modal('show');
					}else if(res.code=='1'){
						//刷新
						queryClueByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'))
						$('#createClueModal').modal('hide');
					}
				}
			});
		});

		queryClueByConditionForPage(1,10);

		$('#queryClueByConditionForPageBtn').click(function(){
			queryClueByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
		});

		$('#checkAll').click(function(){
			$('#clueListTbody input[type="checkbox"]').prop('checked',$('#checkAll').prop('checked'));
		});

		$('#clueListTbody').on('click','input[type="checkbox"]',function(){
			$('#checkAll').prop('checked',$('#clueListTbody input[type="checkbox"]').size()==$('#clueListTbody input[type="checkbox"]:checked').size()?true:false);
		});

		$('#deleteClueByIdBtn').click(function(){

			if($('#clueListTbody input[type="checkbox"]:checked').size() == 0){
				alert('请选择要删除的数据');
				return;
			}

			if(confirm('您确定要删除吗?')){
				var ids = '';

				$('#clueListTbody input[type="checkbox"]:checked').each(function(){
					ids += 'ids=' + this.value + '&';
				});

				ids = ids.substr(0,ids.length-1);

				$.ajax({
					url:'workbench/clue/deleteClueByIds.do',
					data:ids,
					dataType:'json',
					type:'post',
					success:function(res){
						if(res.code=='0'){
							alert(res.message);
						}else if(res.code=='1'){
							queryClueByConditionForPage(1,$('#pagination').bs_pagination('getOption','rowsPerPage'));
						}
					}
				});
			}
		});

		$('#showUpdateClueModalBtn').click(function(){
			if($('#clueListTbody input[type="checkbox"]:checked').size() != 1){
				alert('请选择一条数据');
				return;
			}

			var id = $('#clueListTbody input[type="checkbox"]:checked').get(0).value;

			$.ajax({
				url:'workbench/clue/queryClueById.do',
				data:{
					id:id
				},
				dataType:'json',
				type:'post',
				success:function(res){
					if(res.code=='0'){
						alert(res.message);
						$('#editClueModal').modal('hide');
					}else if(res.code=='1'){
						//渲染页面
						$('#edit-clue-id').val(res.retData.id);
						$('#edit-company').val(res.retData.company);
						$('#edit-surname').val(res.retData.fullname);
						var job = res.retData.job==null?'':res.retData.job;
						var email = res.retData.email==null?'':res.retData.email;
						var phone = res.retData.phone==null?'':res.retData.phone;
						var website = res.retData.website==null?'':res.retData.website;
						var mphone = res.retData.mphone==null?'':res.retData.mphone;
						var description = res.retData.description==null?'':res.retData.description;
						var contactSummary = res.retData.contactSummary==null?'':res.retData.contactSummary;
						var nextContactTime = res.retData.nextContactTime==null?'':res.retData.nextContactTime;
						var address = res.retData.address==null?'':res.retData.address;

						if(res.retData.owner!=null){
							$('#edit-clueOwner').val(res.retData.owner);
						}

						if(res.retData.appellation!=null){
							$('#edit-call').val(res.retData.appellation);
						}

						if(res.retData.state!=null){
							$('#edit-status').val(res.retData.state);
						}

						if(res.retData.source!=null){
							$('#edit-source').val(res.retData.source);
						}

						$('#edit-job').val(job);
						$('#edit-email').val(email);
						$('#edit-phone').val(phone);
						$('#edit-website').val(website);
						$('#edit-mphone').val(mphone);
						$('#edit-describe').val(description);
						$('#edit-contactSummary').val(contactSummary);
						$('#edit-nextContactTime').val(nextContactTime);
						$('#edit-address').val(address);

						$('#editClueModal').modal('show');
					}
				}
			});
		});

		$('#updateClueBtn').click(function(){
			var id = $('#edit-clue-id').val();
			var owner = $('#edit-clueOwner').val();
			var company = $.trim($('#edit-company').val());
			var appellation = $('#edit-call').val();
			var fullname = $.trim($('#edit-surname').val());
			var job = $.trim($('#edit-job').val());
			var email = $.trim($('#edit-email').val());
			var phone = $.trim($('#edit-phone').val());
			var website = $.trim($('#edit-website').val());
			var mphone = $.trim($('#edit-mphone').val());
			var state = $('#edit-status').val();
			var source = $('#edit-source').val();
			var description = $('#edit-describe').val();
			var contactSummary = $('#edit-contactSummary').val();
			var nextContactTime = $('#edit-nextContactTime').val();
			var address = $('#edit-address').val();

			if(owner==null||owner==''){
				alert('所有者不能为空');
				return;
			}

			if(company==null||company==''){
				alert('公司不能为空');
				return;
			}

			if(fullname==null||fullname==''){
				alert('姓名不能为空');
				return;
			}

			var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			if(email!=null&&email!=''&&!regExp.test(email)){
				alert('邮箱不合法');
				return;
			}

			regExp = /^(0\d{2,3})-?(\d{7,8})$/;
			if(phone!=null&&phone!=''&&!regExp.test(phone)){
				alert('公司座机不合法');
				return;
			}

			regExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if(mphone!=null&&mphone!=''&&!regExp.test(mphone)){
				alert('手机号不合法');
				return;
			}

			regExp = /^((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?)$/;
			if(website!=null&&website!=''&&!regExp.test(website)){
				alert('公司网站不合法');
				return;
			}

			$.ajax({
				url:'workbench/clue/updateClueById.do',
				data:{
					id:id,
					owner:owner,
					company:company,
					appellation:appellation,
					fullname:fullname,
					job:job,
					email:email,
					phone:phone,
					website:website,
					mphone:mphone,
					state:state,
					source:source,
					description:description,
					contactSummary:contactSummary,
					nextContactTime:nextContactTime,
					address:address
				},
				dataType:'json',
				type:'post',
				success:function(res){
					if(res.code=='0'){
						alert(res.message);
						$('#editClueModal').modal('show');
					}else if(res.code=='1'){
						//刷新
						queryClueByConditionForPage($('#pagination').bs_pagination('getOption','currentPage'),$('#pagination').bs_pagination('getOption','rowsPerPage'))
						$('#editClueModal').modal('hide');
					}
				}
			});
		});
	});

	function queryClueByConditionForPage(pageNo,pageSize) {
		var fullName = $('#fullName').val();
		var company = $('#company').val();
		var phone = $('#phone').val();
		var source = $('#source').val();
		var owner = $('#owner').val();
		var mphone = $('#mphone').val();
		var state = $('#state').val();

		$.ajax({
			url:'workbench/clue/queryClueByConditionForPage.do',
			data:{
				fullName:fullName,
				company:company,
				phone:phone,
				source:source,
				owner:owner,
				mphone:mphone,
				state:state,
				pageNo:pageNo,
				pageSize:pageSize
			},
			dataType:'json',
			type:'post',
			success:function(res){
				var totalPages = 1;
				if(res.totalRows%pageSize==0){
					totalPages = res.totalRows/pageSize;
				}else{
					totalPages = res.totalRows/pageSize + 1;
				}

				$('#pagination').bs_pagination({
					currentPage:pageNo,

					rowsPerPage:pageSize,
					totalRows:res.totalRows,
					totalPages:totalPages,

					visiblePageLinks:5,

					showGoToPage:true,
					showRowsPerPage:true,
					showRowsInfo:true,

					onChangePage:function (event,pageObj) {
						queryClueByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
					}
				});

				$('#clueListTbody').empty();

				var htmlStr = '';
				var name = '';
				var appellation = '';
				var phone = '';
				var mphone = '';
				var source = '';
				var state = '';

				$.each(res.clueList,function(i,n){
					appellation = n.appellation==null?'':n.appellation;
					name = n.fullname + appellation;
					phone = n.phone==null?'':n.phone;
					mphone = n.mphone==null?'':n.mphone;
					source = n.source==null?'':n.source;
					state = n.state==null?'':n.state;
					htmlStr += '<tr>';
					htmlStr += '<td><input type="checkbox" value="' + n.id + '"/></td>';
					htmlStr += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/clue/detailActivity.do?id=' + n.id + '\'">' + name + '</a></td>';
					htmlStr += '<td>' + n.company + '</td>';
					htmlStr += '<td>' + phone + '</td>';
					htmlStr += '<td>' + mphone + '</td>';
					htmlStr += '<td>' + source + '</td>';
					htmlStr += '<td>' + n.owner + '</td>';
					htmlStr += '<td>' + state + '</td>';
					htmlStr += '</tr>';
				});

				$('#clueListTbody').html(htmlStr);

				$('#checkAll').prop('checked',false);
			}
		});
	}
	
</script>
</head>
<body>

	<!-- 创建线索的模态窗口 -->
	<div class="modal fade" id="createClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">创建线索</h4>
				</div>
				<div class="modal-body">
					<form id="saveCreateClueForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-clueOwner">
								  <c:forEach items="${requestScope.userList}" var="user">
									<option value="${user.id}">${user.name}</option>
								  </c:forEach>
								</select>
							</div>
							<label for="create-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-company">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-call" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-call">
								  <option></option>
								  <c:forEach items="${requestScope.appellationList}" var="appellation">
									  <option value="${appellation.id}">${appellation.value}</option>
								  </c:forEach>
								</select>
							</div>
							<label for="create-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-surname">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-job">
							</div>
							<label for="create-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-email">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-phone">
							</div>
							<label for="create-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-website">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-mphone">
							</div>
							<label for="create-status" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-status">
								  <option></option>
								  <c:forEach items="${requestScope.clueStateList}" var="clueState">
									<option value="${clueState.id}">${clueState.value}</option>
								  </c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-source">
								  <option></option>
								  <c:forEach items="${requestScope.sourceList}" var="source">
									<option value="${source.id}">${source.value}</option>
								  </c:forEach>
								</select>
							</div>
						</div>
						

						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">线索描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control mydate" id="create-nextContactTime" readonly>
								</div>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>
						
						<div style="position: relative;top: 20px;">
							<div class="form-group">
                                <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="create-address"></textarea>
                                </div>
							</div>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCreateClueBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改线索的模态窗口 -->
	<div class="modal fade" id="editClueModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">修改线索</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-clue-id">
						<div class="form-group">
							<label for="edit-clueOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-clueOwner">
									<c:forEach items="${requestScope.userList}" var="user">
										<option value="${user.id}">${user.name}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-company" class="col-sm-2 control-label">公司<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-company" value="动力节点">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-call" class="col-sm-2 control-label">称呼</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-call">
								  <option></option>
									<c:forEach items="${requestScope.appellationList}" var="appellation">
										<option value="${appellation.id}">${appellation.value}</option>
									</c:forEach>
								</select>
							</div>
							<label for="edit-surname" class="col-sm-2 control-label">姓名<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-surname" value="李四">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-job" class="col-sm-2 control-label">职位</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-job" value="CTO">
							</div>
							<label for="edit-email" class="col-sm-2 control-label">邮箱</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-email" value="lisi@bjpowernode.com">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-phone" value="010-84846003">
							</div>
							<label for="edit-website" class="col-sm-2 control-label">公司网站</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-mphone" class="col-sm-2 control-label">手机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-mphone" value="12345678901">
							</div>
							<label for="edit-status" class="col-sm-2 control-label">线索状态</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-status">
								  <option></option>
									<c:forEach items="${requestScope.clueStateList}" var="clueState">
										<option value="${clueState.id}">${clueState.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-source" class="col-sm-2 control-label">线索来源</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-source">
								  <option></option>
									<c:forEach items="${requestScope.sourceList}" var="source">
										<option value="${source.id}">${source.value}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">这是一条线索的描述信息</textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>
						
						<div style="position: relative;top: 15px;">
							<div class="form-group">
								<label for="edit-contactSummary" class="col-sm-2 control-label">联系纪要</label>
								<div class="col-sm-10" style="width: 81%;">
									<textarea class="form-control" rows="3" id="edit-contactSummary">这个线索即将被转换</textarea>
								</div>
							</div>
							<div class="form-group">
								<label for="edit-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
								<div class="col-sm-10" style="width: 300px;">
									<input type="text" class="form-control mydate" id="edit-nextContactTime" value="2017-05-01">
								</div>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="edit-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-address">北京大兴区大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateClueBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>线索列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="fullName">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司</div>
				      <input class="form-control" type="text" id="company">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司座机</div>
				      <input class="form-control" type="text" id="phone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索来源</div>
					  <select class="form-control" id="source">
					  	  <option></option>
						  <c:forEach items="${requestScope.transactionTypeList}" var="transactionType">
							  <option value="${transactionType.id}">${transactionType.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>
				  
				  <br>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="owner">
				    </div>
				  </div>
				  
				  
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">手机</div>
				      <input class="form-control" type="text" id="mphone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">线索状态</div>
					  <select class="form-control" id="state">
					  	<option></option>
						  <c:forEach items="${requestScope.clueStateList}" var="clueState">
							  <option value="${clueState.id}">${clueState.value}</option>
						  </c:forEach>
					  </select>
				    </div>
				  </div>

				  <button type="button" class="btn btn-default" id="queryClueByConditionForPageBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 40px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="showSaveCreateClueModalBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="showUpdateClueModalBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteClueByIdBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
				
			</div>
			<div style="position: relative;top: 50px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="checkAll" /></td>
							<td>名称</td>
							<td>公司</td>
							<td>公司座机</td>
							<td>手机</td>
							<td>线索来源</td>
							<td>所有者</td>
							<td>线索状态</td>
						</tr>
					</thead>
					<tbody id="clueListTbody">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 60px;">

				<div id="pagination">

				</div>

				<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
			</div>
		</div>
	</div>
</body>
</html>